<!--
 * @Author: Chuckie
 * @Email: chuckie@aliyun.com
 * @Date: 2022-11-10 14:35:49
 * @LastEditTime: 2023-04-04 10:54:51
 * @Description: 
 * @FilePath: /web/src/views/system/dict/info/detail.vue
 *  
-->
<template>
  <div class="app-container">
    <div class="page-detail">
      <el-form :model="state.form" label-width="120px">
        <el-form-item :label="$t('sysDictInfo.search.type')">
          <el-select v-model="state.form.typeId">
            <el-option v-for="item in state.dataSource" :key="item.id" :label="item.typeName" :value="item.id" />
          </el-select>
        </el-form-item>
        <el-form-item :label="$t('sysDictInfo.table.name')">
          <el-input v-model="state.form.name" />
        </el-form-item>

        <el-form-item :label="$t('sysDictInfo.table.code')">
          <el-input v-model="state.form.code" />
        </el-form-item>

        <el-form-item :label="$t('sysDictInfo.table.parentId')">
          <el-input v-model="state.form.pid" />
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="onSubmit">{{$t('common.button.save')}}</el-button>
          <el-button @click="onCancel">{{$t('common.button.back')}}</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script setup lang="ts">
import { DictType, select as selectType } from './api/dict-type'
import { DictInfo, create, selectOne, update } from './api/dict-info'
const route = useRoute()
const router = useRouter()

const { proxy }: any = getCurrentInstance()
const state = reactive({
  form: {} as DictInfo,
  dataSource: [] as DictType[]
})

const onCancel = () => {
  router.back()
}

const onSubmit = async () => {
  if (route.params.id && route.params.id != '0') {
    const data = await update(state.form)
    proxy.$message({ message: proxy.$t('common.message.editSuccessfully'), type: 'success' })
  } else {
    const data = await create(state.form)
    proxy.$message({ message: proxy.$t('common.message.saveSuccessfully'), type: 'success' })
    state.form.code = ''
    state.form.name = ''
    state.form.pid = 0
    state.form.typeId = 0
  }
  router.back()
}

const onSelectOne = async (id: string) => {
  const data = await selectOne(id)
  data.data.cascadeFlag == 1 ? (data.data.cascadeFlag = true) : (data.data.cascadeFlag = false)
  state.form = { ...data.data }
}

const onSelectType = async () => {
  const data = await selectType({})
  state.dataSource = data.data.items
}

onMounted(() => {
  route.params.id && !Array.isArray(route.params.id) && onSelectOne(route.params.id)
  onSelectType()
})
</script>
